<template>
  <el-dialog :visible.sync="visible" custom-class="dialog_big" width="50%" @close="resetForm">
    <div slot="title" class="flex_row-jcsb">
      <slot name="title">
        <span class="el-dialog__title">{{ $tt('label_schedule_appointment') }}</span>
      </slot>
      <span class="newDate">{{ $tt('label_now_date') }}：{{ currentDate }}</span>
    </div>
    <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$tt('label_inbound_warehouse')" prop="warehouseId">
            <el-select v-model="formData.warehouseId" :disabled="isEdit" @change="getInWarehouseList"
              :placeholder="$tt('tip_please_select')">
              <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName"
                :value="item.warehouseId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_waybill_code')" prop="transitNo">
            <el-input v-model="formData.transitNo" :disabled="isEdit" :placeholder="$tt('tip_please_input')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_inbound_code')" prop="omsInboundScheduleDetailList">
            <el-select v-model="formData.omsInboundScheduleDetailList" :disabled="isEdit" @change="inWarehouseListChange"
              multiple value-key="receivingOrderCode" filterable :placeholder="$tt('tip_please_select')">
              <el-option v-for="item in inWarehouseList" :key="item.receivingOrderCode" :label="item.receivingOrderCode"
                :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_car_number')" prop="vehicleNo">
            <el-input v-model="formData.vehicleNo" :disabled="isEdit" :placeholder="$tt('tip_please_input')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_driver_name')" prop="driverName">
            <el-input v-model="formData.driverName" :disabled="isEdit" :placeholder="$tt('tip_please_input')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_driver_phone')" prop="driverPhone">
            <el-input v-model="formData.driverPhone" :disabled="isEdit" :placeholder="$tt('tip_please_input')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_declared_package_number')">
            <el-input v-model="formData.expectPackagingQty" disabled :placeholder="$tt('tip_please_input')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_declared_box_number')">
            <el-input v-model="formData.expectBoxQty" disabled :placeholder="$tt('tip_please_input')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_declare_goods_sum_weight')" prop="weight">
            <el-input v-model="formData.weight" disabled :placeholder="$tt('tip_please_input')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_declare_goods_sum_volume')" prop="volumn">
            <el-input v-model="formData.volumn" disabled :placeholder="$tt('tip_please_input')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$tt('label_expected_arrival_date')" prop="expectedDatetime">
            <el-date-picker v-model="formData.expectedDatetime" type="datetime" :placeholder="$tt('tip_please_select')"
              value-format="timestamp" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="groupBoxList" label-width="0">
        <ex_super_table v-bind="tableDetailList" :data="formData.omsInboundScheduleDetailList" ref="TableSku">
        </ex_super_table>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog_button_footer">
      <el-button type="primary" @click="submitForm">{{ $tt('label_confirm') }}</el-button>
      <el-button @click="resetForm">{{ $tt('label_cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'settings',
  data() {
    return {
      visible: false,
      loading: false,
      currentDate: '',
      warehouseList: [],
      inWarehouseList: [],
      formData: {
        "warehouseId": '',
        "warehouseCode": "",
        "warehouseName": "",
        "transitNo": "",
        "vehicleNo": "",
        "driverName": "",
        "driverPhone": "",
        "expectedDatetime": '',
        "expectPackagingQty": '',
        "expectBoxQty": '',
        "weight": '',
        "volumn": '',
        "omsInboundScheduleDetailList": [],
      },
      rules: {
        warehouseId: { required: true, message: Vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' },
        transitNo: { required: true, message: Vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' },
        omsInboundScheduleDetailList: { required: true, message: Vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' },
        vehicleNo: { required: true, message: Vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' },
        driverName: { required: true, message: Vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' },
        driverPhone: { required: true, message: Vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' },
        expectedDatetime: { required: true, message: Vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' },
      },
      isEdit: true,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      tableDetailList: {
        model: [
          { key: 'receivingOrderCode', label: 'label_inbound_code', 'width': 100, 'show-overflow-tooltip': true },
          {
            key: 'expectPackagingQty', label: 'label_declared_package_number', component: ({ row }) => {
              return {
                type: 'input-number',
                attrs: { min: 0, precision: 0, disabled: this.isEdit },
                on: {
                  input: e => {
                    if (e === undefined) {
                      row.expectPackagingQty = 0
                      this.$forceUpdate()
                    }
                    this.tableDataCmp()
                  },
                },
              }
            }
          },
          {
            key: 'expectBoxQty', label: 'label_declared_box_number', component: ({ row }) => {
              return {
                type: 'input-number',
                attrs: { min: 0, precision: 0, disabled: this.isEdit },
                on: {
                  input: e => {
                    if (e === undefined) {
                      row.expectBoxQty = 0
                      this.$forceUpdate()
                    }
                    this.tableDataCmp()
                  }
                },
              }
            }
          },
          {
            key: 'weight', label: 'label_declared_weight', component: ({ row }) => {
              return {
                type: 'input-number',
                attrs: { min: 0, precision: 2, disabled: this.isEdit },
                on: {
                  input: e => {
                    if (e === undefined) {
                      row.weight = 0
                      this.$forceUpdate()
                    }
                    this.tableDataCmp()
                  }
                },
              }
            }
          },
          {
            key: 'volumn', label: 'label_declared_volume', component: ({ row }) => {
              return {
                type: 'input-number',
                attrs: { min: 0, precision: 2, disabled: this.isEdit },
                on: {
                  input: e => {
                    if (e === undefined) {
                      row.volumn = 0
                      this.$forceUpdate()
                    }
                    this.tableDataCmp()
                  }
                },
              }
            }
          },
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    show(data = { row: {}, edit: false }) {
      this.currentDate = this.$dateFormat((new Date().getTime()))
      this.isEdit = data.edit
      this.visible = true
      this.getWarehouse()
      if (this.isEdit) {
        Object.assign(this.formData, data.row)
        this.inWarehouseList = data.row.omsInboundScheduleDetailList
      }
    },
    hide() {
      this.visible = false
    },
    getWarehouse() {
      this.$ajax({
        url: "/oms-api/client/OmsBaseWarehouseClientRpc/selectAuthWarehouse.json",
        method: 'get',
        success: (res) => {
        if(res&&res.data&&res.data.rows){
            this.warehouseList = res.data.rows
          }
        }
      })
    },
    getInWarehouseList(warehouseId, flg) {
      if (warehouseId && !flg) {
        // 变更时清理其他关联数据
        this.formData.omsInboundScheduleDetailList = []
        this.inWarehouseListChange()
        let obj = this.warehouseList.find(item => item.warehouseId === warehouseId)
        if (obj) {
          this.formData.warehouseCode = obj.warehouseCode
          this.formData.warehouseName = obj.warehouseName
        } else {
          this.formData.warehouseCode = ''
          this.formData.warehouseName = ''
        }
      }
      this.$ajax({
        url: "/oms-api/client/OmsInboundScheduleClientRpc/selectByWarehouseId.json",
        method: 'get',
        type: 'formData',
        data: {
          warehouseId
        },
        success: (res) => {
          if (res.data.rows) {
            this.inWarehouseList = res.data.rows
          }
        }
      })
    },
    inWarehouseListChange() {
      this.formData.expectPackagingQty = 0
      this.formData.expectBoxQty = 0
      this.formData.weight = 0
      this.formData.volumn = 0


      this.formData.omsInboundScheduleDetailList.forEach((item, index) => {
        this.formData.expectPackagingQty += item.expectPackagingQty
        this.formData.expectBoxQty += item.expectBoxQty
        this.formData.weight += item.totalWeight
        this.formData.volumn += item.totalVolume

        this.$set(item, 'expectPackagingQty', item.expectPackagingQty)
        this.$set(item, 'expectBoxQty', item.expectBoxQty)
        this.$set(item, 'weight', item.totalWeight)
        this.$set(item, 'volumn', item.totalVolume)
        // item.expectPackagingQty= item.expectBoxQty
        // item.expectBoxQty=item.expectSkuQty
        // item.weight=item.totalWeight
        // item.volumn=item.totalVolume
      })

      this.formData.weight = this.formData.weight.toString().match(/^\d+(?:\.\d{0,2})?/)[0]
      this.formData.volumn = this.formData.volumn.toString().match(/^\d+(?:\.\d{0,2})?/)[0]
    },
    tableDataCmp() {
      this.formData.expectPackagingQty = 0
      this.formData.expectBoxQty = 0
      this.formData.weight = 0
      this.formData.volumn = 0
      this.formData.omsInboundScheduleDetailList.forEach((item, index) => {
        this.formData.expectPackagingQty += item.expectPackagingQty
        this.formData.expectBoxQty += item.expectBoxQty
        this.formData.weight += item.weight
        this.formData.volumn += item.volumn
      })
      this.formData.weight = this.formData.weight.toString().match(/^\d+(?:\.\d{0,2})?/)[0]
      this.formData.volumn = this.formData.volumn.toString().match(/^\d+(?:\.\d{0,2})?/)[0]
    },
    submitForm() {
      console.log(this.formData)
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const data = this.isEdit ? {
            id: this.formData.id,
            expectedDatetime: this.formData.expectedDatetime,
          } : this.formData
          const url = this.isEdit ? '/oms-api/client/OmsInboundScheduleClientRpc/update.json' : '/oms-api/client/OmsInboundScheduleClientRpc/save.json'
          this.$ajax({
            url,
            method: 'post',
            data,
            type: "json",
            loading: true,
            success: (res) => {
              this.$emitPage('warehouse_appointment>confirm', 'reload')
              this.resetForm()
              this.$message.success(this.$t('tip_appointment_report_success'))
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      console.log(this.rules)
      this.$refs['ruleForm'].resetFields();
      this.$data.formData = this.$options.data().formData
      this.visible = false;
    },
  }
}
</script>

<style lang="less" scoped>
.newDate {
  float: right;
  margin-right: 40px;
}

.el-select {
  display: block;
}
</style>
